import React, { Component } from 'react';
import { Table } from 'antd';
import { observer } from 'mobx-react';
import ComponentStore from '../../stores/ComponentStore';

import './hotWordsBar.scss';

const columns = [
    {
        title: '内容',
        className: 'table-cell',
        dataIndex: 'content',
        key: 'content',
        width: '40%'
    },
    {
        title: '处理部门',
        key: 'department',
        dataIndex: 'department',
        className: 'table-cell',
        width: '20%'
    },
    {
        title: '日期',
        key: 'date',
        dataIndex: 'date',
        className: 'table-cell',
        width: '40%'
    },
];

interface HotWordsBarProps {
    componentStore: ComponentStore;
}

@observer
export default class HotWordsBar extends Component<HotWordsBarProps> {
    componentWillMount() {
        this.props.componentStore.getHotEventData();
    }
    render(): JSX.Element {
        const componentStore = this.props.componentStore;
        return (
            <div className="hotwordsbar-container">
                <div className="bar-header" >
                    {componentStore.hotEventData.map((v, i) =>
                        (
                            <div
                                className={`keyword-Item ${ componentStore.hotEventIndex === i ? 'hot-event-btn' : ''}`}
                                key={i}
                                onClick={() => { componentStore.hotEventIndex = i; }}
                            >
                                {v.title}
                            </div>
                        )
                    )}
                    <div className="refresh-btn">刷新</div>
                </div>
                <div className="hotWords-content">
                    <Table  
                        dataSource={componentStore.hotEventData[componentStore.hotEventIndex].value} 
                        rowKey="title"
                        columns={columns} 
                        pagination={false} 
                        style={{width: '100%'}}
                    />
                </div>
            </div>
        );
    }
}